<template>
	<view class="buy">
		<uni-popup ref="activatePopup" class="me-popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="img">
					<image src="https://pic.imgdb.cn/item/669397cad9c307b7e9a9991e.jpg" show-menu-by-longpress="{{true}}"></image>
				</view>
				<view class="">
					长按关注公众号【研了个研呀】 免费获取激活码，凭激活码激活小程序
				</view>
				<input class="uni-input" focus placeholder="请输入激活码" v-model="activateValue" />
				<view @click="activateButton" class="acButton">激活</view>
			</view>

		</uni-popup>
		<uni-popup ref="groupChatPopup" class="groupChatPopup" background-color="#fff" @change="change">
			<view class="groupChatPopupcontent">
				<view class="title"> 欢迎进群 </view>
				<view class="qq">
					<view class="qq-img">
						<image src="https://pic.imgdb.cn/item/66939b16d9c307b7e9af34d5.png" mode=""></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="price">
			限时福利：<text style="color: #e06c61;">原价19.9元</text>，下单立减10元，<text style="color: #e06c61;">仅需9.99元！</text>
		</view>

		<view class="content">
			<view class="title">
				<view class="line">
				</view>
				<view class="text">
					激活说明
				</view>
			</view>
			<view class="detail" >
				<rich-text :nodes="explainContent"></rich-text>
			</view>
		</view>
		<view class="operation">
			<button class="my-button" size="default" plain="true" @click="getOrder" v-if="!(platform == 'ios' && payStatus == 1)">￥9.99购买VIP2</button>
			<button class="my-button" size="default" plain="true" @click="freeActivate">免费领取VIP1</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const activatePopup = ref();
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	import util from '../../util/index.js'
	const payStatus = ref("")
	const platform = ref("")
	const activateValue = ref("")
	const groupChatPopup = ref()
	const explainContent = ref("")
	onLoad(() => {
		getPayStatus()
		getplatform()
		// getnotice()
	})
	const freeActivate = () => {
		const userInfo = uni.getStorageSync('userInfo')

		if (userInfo.vip == 0) {
			console.log('activatePopup.value.open()',activatePopup.value)
			activatePopup.value.open()
			// showModal()
		} else if (userInfo.vip == 1) {
			uni.showToast({
				title: '此账号已为VIP1',
				duration: 1500,
				icon: 'none'
			});
		} else if(userInfo.vip == 2)
		uni.showToast({
			title: '此账号已为VIP2',
			duration: 1500,
			icon: 'none'
		});
		else {
			uni.showModal({
				title: '提示',
				content: '检测到未登录，登录后享受服务',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}

	}
	const getUserInfo = (openid) => {
		uni.request({
			url: util.baseUrl + "/wxapi/user/getUserInfo",
			method: "GET",
			data: {
				openid,
			},
			success: (res) => {
				if (res.data.data) {
					uni.setStorageSync("userInfo", res.data.data);
					// userInfo.value = res.data.data;
				}
			},
		});
	};
	const getplatform = () => {
		let tempplatform = uni.getSystemInfoSync().platform;
		platform.value = tempplatform
		console.log('platform.value',platform.value)
	}
	const getPayStatus = () => {
		uni.request({
			url: util.baseUrl + '/adminapi/AdminConfig/getAdminConfig',
			success: (res) => {
				console.log('res.data', res.data)
				if (res.data.code == 200) {
					explainContent.value = res.data.data.explainContent
					payStatus.value = res.data.data.payStatus
					console.log('res.data.data.explainContent',res.data.data.explainContent)
				}
			}
		})
	}
	
	const activateButton = () => {
		const userInfo = uni.getStorageSync("userInfo");
		if (activateValue.value) {
			uni.request({
				url: util.baseUrl + "/wxapi/activation/userActivate",
				data: {
					userId: userInfo._id,
					code: activateValue.value.trim(),
					openid:userInfo.openid
				},
				method: "POST",
				success: (res) => {
					if (res.data.code == 200) {
						activateValue.value = "";
						activatePopup.value.close();
						getUserInfo(userInfo.openid);
						uni.showToast({
							title: "激活成功",
							duration: 1000,
						});
						setTimeout(() => {
							groupChatPopup.value.open();
						}, 10);
					} else if (res.data.code == 202) {
						uni.showToast({
							title: "激活码输入错误或已使用",
							icon: "none",
							duration: 2000,
						});
					} else {
						uni.showToast({
							title: "服务器错误",
							icon: "none",
							duration: 1500,
						});
					}
				},
			});
		}
	};
	const getOrder = () => {
		const userInfo = uni.getStorageSync('userInfo')
		
		if (userInfo.vip == 2) {
			uni.showToast({
				title: '此账号已为VIP2',
				duration: 1500,
				icon: 'none'
			});
			
		} else if (userInfo.vip == 1 || userInfo.vip == 0) {
			uni.request({
				url: util.baseUrl + '/wxapi/comment/getOrderParams',
				method: 'GET',
				data: {
					openid: userInfo.openid,
					type:1,
					origin:'wx',
					userId:userInfo._id,
					
				},
				success: (res) => {
					console.log('res', res)
					if (res.data.code == 200) {
						uni.requestPayment({
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success(res) {
								groupChatPopup.value.open();
								getUserInfo(userInfo.openid);
								
							},
							fail(res) {
								console.log('支付失败', res)
							}
						})
					}
				}
			})
		} else if(payStatus.value == 1 && userInfo._id) {
			activatePopup.value.open()
		}
		
		else {

			uni.showModal({
				title: '提示',
				content: '检测到未登录，登录后享受服务',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
			
		}

	}
</script>

<style lang="scss">
	.uni-popup__wrapper {
		border-radius: 20rpx;
	}

	.buy {
		background-color: #fff;
		padding: 40rpx;
		padding-top: 0;
		height: 100vh;
		font-size: 28rpx;
		.groupChatPopup {
			padding: 20rpx;
		
			.title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 700;
				margin: 10rpx 0;
			}
		
			.qq-img {
				width: 500rpx;
				height: 620rpx;
				border-radius: 20rpx;
				overflow: hidden;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.popup-content {
			padding: 50rpx;
			width: 500rpx;
			height: 500rpx;
			border-radius: 10rpx;

			.uni-input {
				background-color: #fcf3ca;
				padding: 10rpx 20rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
			}

			.img {
				width: 150rpx;
				height: 150rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.acButton {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #ffc637;
				font-size: 36rpx;
				font-weight: 700;
				color: #3a2e27;
				text-align: center;
				border-radius: 40rpx;
				margin: 0 auto;
			}
		}

		.content {
			margin-top: 30rpx;

			.title {
				position: relative;
				font-weight: 700;

				.line {
					top: 8rpx;

					position: absolute;
					width: 10rpx;
					height: 30rpx;
					background-color: #fcd22e;
				}

				.text {
					margin-left: 20rpx;
				}
			}

			.detail-item {
				margin-top: 15rpx;
			}
		}

		.operation {
			margin-top: 100rpx;
			display: flex;
		}

		button {
			background: linear-gradient(to left, #fdd21f, #ffe537);
			height: 80rpx;
			border-radius: 30rpx;
			font-weight: 700;
			width: 310rpx;
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			padding-left: 0rpx;
			padding-right: 0rpx;
		}
	}
</style>